.clock {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.hour {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(84deg);
}
.hour .hand {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: tick 43200s normal infinite steps(3600, end);
}
.hour .hand:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    top: 0;
    width: 1px;
    height: 0;;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #708399;
    transform-origin: center 100%;
}
.hour .hand:before {
    animation: hour-grow-before 0s cubic-bezier(0.69, 0, 0.49, 1) 0s 1 forwards;
}
@keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 20px; top: -20px; }
}
.minute {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(288deg);
}
.minute .hand {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: tick 3600s normal infinite steps(3600, end);
}
.minute .hand:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    top: 0;
    width: 1px;
    background-color: #708399;
    transform-origin: center 100%;
}
.minute .hand:before {
    animation: minute-grow-before 0s cubic-bezier(0.69, 0, 0.49, 1) 0s 1 forwards;
}
@keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 20px; top: -20px; }
}
.second {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(0deg);
}
.second .hand {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: tick-second 1s normal infinite steps(30, end);
}
.second .hand:before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    width: 1px;
    height: 0;
    background-color: #f16b41;
    border-radius: 10px;
    transform-origin: center 100%;
    animation: second-grow 1 forwards, second 60s normal infinite steps(60, end) ;
}
@keyframes second-grow{ from { top: 0; height: 0; } 100%{height: 20px; top: -20px;}
}
.second .hand:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 32px;
    background-clip: padding-box;
    background-color: #f16b41;
}
@keyframes tick{ 0%{transform: rotate(0deg); } 100%{transform: rotate(360deg); }}
@keyframes second{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}
}
.minute-marks {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 0;
    height: 0;
    color: darkgray;
}
.minute-marks li {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 50px;
    height: 50px;
}
.minute-marks li:before,
.minute-marks li:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    display: inline-block;
    border-radius: 4px;
    border: solid 1px;
}
.minute-marks li:before {
    top: -50px;
}
.minute-marks li:after {
    bottom: -50px;
}
.minute-marks li.five:before,
.minute-marks li.five:after {
    width: 0px;
    height: 2px;
}
.minute-marks li.five:before {
    top: -48px;
}
.minute-marks li.five:after {
    bottom: -48px;
}
.minute-marks li:nth-child( 1) {
    transform: rotate(0deg);
}
.minute-marks li:nth-child( 2) {
    transform: rotate(6deg);
}
.minute-marks li:nth-child( 3) {
    transform: rotate(12deg);
}
.minute-marks li:nth-child( 4) {
    transform: rotate(18deg);
}
.minute-marks li:nth-child( 5) {
    transform: rotate(24deg);
}
.minute-marks li:nth-child( 6) {
    transform: rotate(30deg);
}
.minute-marks li:nth-child( 7) {
    transform: rotate(36deg);
}
.minute-marks li:nth-child( 8) {
    transform: rotate(42deg);
}
.minute-marks li:nth-child( 9) {
    transform: rotate(48deg);
}
.minute-marks li:nth-child( 10) {
    transform: rotate(54deg);
}
.minute-marks li:nth-child( 11) {
    transform: rotate(60deg);
}
.minute-marks li:nth-child( 12) {
    transform: rotate(66deg);
}
.minute-marks li:nth-child( 13) {
    transform: rotate(72deg);
}
.minute-marks li:nth-child( 14) {
    transform: rotate(78deg);
}
.minute-marks li:nth-child( 15) {
    transform: rotate(84deg);
}
.minute-marks li:nth-child( 16) {
    transform: rotate(90deg);
}
.minute-marks li:nth-child( 17) {
    transform: rotate(96deg);
}
.minute-marks li:nth-child( 18) {
    transform: rotate(102deg);
}
.minute-marks li:nth-child( 19) {
    transform: rotate(108deg);
}
.minute-marks li:nth-child( 20) {
    transform: rotate(114deg);
}
.minute-marks li:nth-child( 21) {
    transform: rotate(120deg);
}
.minute-marks li:nth-child( 22) {
    transform: rotate(126deg);
}
.minute-marks li:nth-child( 23) {
    transform: rotate(132deg);
}
.minute-marks li:nth-child( 24) {
    transform: rotate(138deg);
}
.minute-marks li:nth-child( 25) {
    transform: rotate(144deg);
}
.minute-marks li:nth-child( 26) {
    transform: rotate(150deg);
}
.minute-marks li:nth-child( 27) {
    transform: rotate(156deg);
}
.minute-marks li:nth-child( 28) {
    transform: rotate(162deg);
}
.minute-marks li:nth-child( 29) {
    transform: rotate(168deg);
}
.minute-marks li:nth-child( 30) {
    transform: rotate(174deg);
}
